<template>
  <!-- 对话框 -->
  <el-dialog :title="formData.id ? '编辑分类':'添加分类'" :visible.sync="showDialog" @close="closeFn">
    <!-- 表单 -->
    <el-form ref="form" :model="formData" :rules="rules" label-width="70px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="formData.title" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <!--
          此处使用resize限制文本域拖动
          限制文本域行数为4行
         -->
        <el-input v-model="formData.desc" type="textarea" resize="none" :rows="4" />
      </el-form-item>
      <el-form-item label="封面">
        <!-- 上传图片 -->
        <el-upload class="avatar-uploader" action="" :show-file-list="false" :on-change="uploadImg">
          <img v-if="formData.image" :src="formData.image" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
        <el-input v-model="formData.forcingImg" placeholder="强制设置图片跳过上传" />
      </el-form-item>
    </el-form>
    <!-- footer -->
    <template v-slot:footer>
      <el-row slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="submit">确定</el-button>
        <el-button size="small" @click="closeFn">取消</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
<script>
import { addCategories, getCategoriesDetail, editCategories } from '@/api/categories'
export default {
  props: {
    // 控制对话框显示
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        title: '', /* 标题 */
        desc: '', /* 描述 */
        image: '', /* 图片地址 */
        forcingImg: ''/* 强制设置图片地址跳过上传 */
      },
      // 校验规则
      rules: {
        title: [
          {
            required: true,
            message: '该项不能为空',
            trigger: 'blur'
          }
        ],
        desc: [
          {
            required: true,
            message: '该项不能为空',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 上传图片
    uploadImg() {
      // this.imgUrl = 'https://mcdn.wallpapersafari.com/medium/7/86/amKnFX.jpg'
      this.formData.image = 'https://mcdn.wallpapersafari.com/medium/7/86/amKnFX.jpg'
    },
    // 获取角色详情
    async getCategoriesDetail(id) {
      const res = await getCategoriesDetail(id)
      // console.log(73, res)
      this.formData = res.data
    },
    // 提交表单,新增分类
    submit() {
      // 表单校验
      this.$refs.form.validate(async bool => {
        if (bool) {
          if (this.formData.id) {
            // 编辑
            await editCategories(this.formData)
          } else {
            // 校验通过 调用接口
            await addCategories(this.formData)
          }
          // 操作成功提示
          // this.$message({
          //   message: '操作成功',
          //   type: 'success'
          // })
          // 关闭弹窗
          this.closeFn()
          // 刷新员工列表数据
          this.$emit('updateEvent')
          // this.$emit('updatePageEvent')
        }
      })
    },
    // 关闭窗口
    closeFn() {
      this.$emit('update:showDialog', false)
      // 清空数据
      this.formData = {
        title: '', /* 标题 */
        desc: '', /* 描述 */
        imageUrl: ''/* 图片地址 */
      }
      // 清空校验规则
      this.$refs.form.resetFields()
    }
  }
}
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 146px;
  text-align: center;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
